<template>
	<view class="container">
		<view class="barHeight"></view>
		<!--  ================================  nav  ===================================== -->
		<view class="nav">
			全部订单
			<view class="back">
				<view @click="back"></view>
			</view>
		</view>
		<scroll-view :scroll-x="true" class="tabList">
			<view class="table_item" :class="navIndex == -1 ? 'active' : ''" @click="handleNav(-1)">
				全部
				<view v-if="navIndex == -1"></view>
			</view>
			<view class="table_item" :class="navIndex == 1 ? 'active' : ''" @click="handleNav(1)">
				待付款
				<view v-if="navIndex == 1"></view>
			</view>
			<view class="table_item" :class="navIndex == 2 ? 'active' : ''" @click="handleNav(2)">
				待发货
				<view v-if="navIndex == 2"></view>
			</view>
			<!-- 待发货和待收货在一起 -->
			<view class="table_item" :class="navIndex == 3 ? 'active' : ''" @click="handleNav(3)">
				待收货
				<view v-if="navIndex == 3"></view>
			</view>
			<view class="table_item" :class="navIndex == 4 ? 'active' : ''" @click="handleNav(4)">
				待评价
				<view v-if="navIndex == 4"></view>
			</view>
			<view class="table_item" :class="navIndex == 6 ? 'active' : ''" @click="handleNav(6)">
				已完成
				<view v-if="navIndex == 6"></view>
			</view>
			<view class="table_item" :class="navIndex == 0 ? 'active' : ''" @click="handleNav(0)">
				已取消
				<view v-if="navIndex == 0"></view>
			</view>
		</scroll-view>
		<!--  ================================  订单列表  ===================================== -->
		<scroll-view class="orderList" scroll-y="true">
			<view class="nodata" v-if="showflag">
				<Default :showflag='showflag' :type='type' />
			</view>
			<view class="order" v-for="(item, index) in orderList" @click="goOrderDetail(item.id)">
				<view class="state" v-if="false">退款完成</view>
				<!-- 店铺 -->
				<view class="store" @click="goStore(item.store_id)">
					<image :src="item.store.store_logo" mode=""></image>
					<view>{{ item.store.store_name }}</view>
					<image src="https://community.chuangxiangdianli.com/images/order/order_arrow.png" mode=""></image>
				</view>
				<!-- 商品 -->
				<view class="goods" v-for="(v, n) in item.order_goods">
					<image class="goodsPic" :src="v.goods_image" mode=""></image>
					<view class="goodsMsg">
						<view class="goodsName">{{ v.goods_name }}</view>
						<view class="goodsSpec"><text v-if="v.sku_id">{{ v.sku_name }}</text></view>
						<view class="goodsPrice">
							<view class="price">￥<text>{{ v.total_price }}</text></view>
							<view class="num" style="margin-top: 10rpx;">x <text>{{ v.buy_num }}</text></view>
						</view>
					</view>
				</view>
				<!-- 价格 -->
				<view class="money">
					<text style="color: #A6A6A6;">共{{ item.goodsNum }}件 合计:</text> ￥ <text>{{ item.total_price }}</text>
				</view>
				<!-- 按钮 -->
				<view class="btnList">
					<view class="more" v-if="item.order_status == 4" @click.stop="handleMore(item)">
						{{ item.showFlag ? '关闭' : '更多' }}
						<view class="viewPop" v-if="item.showFlag">
							<view class="sanjiao"></view>
							<!-- <view @click.stop="goReturn(item.id)">退换货</view> -->
							<view @click.stop="orderDel(item.id)">删除订单</view>
						</view>
					</view>
					<view v-if="item.order_status == 6 || item.order_status == 0" @click.stop="orderDel(item.id)">删除订单
					</view>
					<!-- <view v-if="item.order_status == 3 || item.order_status == 4" @click.stop="goWuliu">查看物流</view> -->
					<view @click.stop="buyAgain(item)"
						v-if="item.order_status == 2 || item.order_status == 4 || item.order_status == 6">再次购买</view>
					<view v-if="item.order_status == 1" @click.stop="changeOrderStatus(item.id, 0)">取消订单</view>
					<view v-if="item.order_status == 1 || item.order_status == 2"
						@click.stop="editAddress(item.id, item.address_id)">修改地址</view>
					<view class="btnActive" v-if="item.order_status == 1" @click.stop="payNow(item.id, item.order_no)">
						立即支付</view>
					<view class="btnActive" v-if="item.order_status == 4" @click.stop="goComment(item.id)">去评价</view>
					<view v-if="item.order_status == 3" @click.stop="changeOrderStatus(item.id, 4)">确认收货</view>
				</view>
			</view>
		</scroll-view>
		<!--  ===============================     用户地址弹出框     ===============================  -->
		<u-popup v-model="addressFlag" mode='bottom' :closeable="true" border-radius="20">
			<view class="addTitle">
				收货地址
				<view class="new" @click="goAddress">新增</view>
			</view>
			<scroll-view scroll-y="true"
				style="max-height: 700rpx;min-height:300rpx;padding: 0 30rpx;box-sizing: border-box;">
				<view class="to_address_item" v-if="JSON.stringify(addressData) != '[]'"
					v-for="(item, index) in addressData" @click="changeAddress(item, index)">
					<view class="check_box">
						<img src="https://community.chuangxiangdianli.com/images/shopCar/choose_n.png"
							v-if="addressId != item.id" alt="">
						<img src="https://community.chuangxiangdianli.com/images/shopCar/choose_s.png"
							v-if="addressId == item.id" alt="">
					</view>
					<view class="txt_box over2">{{item.area_info+item.address}}</view>
				</view>
				<view class="addTitle" v-if="JSON.stringify(addressData) == '[]'">暂无收货地址</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import Default from '../../components/default/default.vue'
	export default {
		components: {
			Default
		},
		data() {
			return {
				showflag: false, // 缺省页标志
				type: 4, // 缺省页标识
				navIndex: 1, // 订单状态index
				orderList: [], // 订单列表数据
				addressIndex: 0, // 用户选中的地址index
				orderId: '',
				addressFlag: false, // 地址选择弹出框
				addressData: [], // 用户地址信息
				addressId: '',

			}
		},
		onLoad(option) {
			if (option.num) {
				this.navIndex = option.num
			}
		},
		onShow() {
			this.getOrderList()
			this.getAddress()
		},
		methods: {
			//  获取订单列表
			getOrderList() {
				var that = this
				that.addressFlag = false
				let num = 0
				if (this.navIndex == -1) {
					this.$mrequest({
						url: 'Mini/order/orderList',
						method: 'POST',
						callBack: function callBack(res) {

							if (res.status) {
								that.orderList = res.data
								if (that.orderList.length > 0) {
									that.orderList.forEach(item => {
										let num = 0
										item.order_goods.forEach(v => {
											num += v.buy_num
										})
										item.goodsNum = num
										item.showFlag = false
									})
									that.showflag = false
								} else {
									that.showflag = true
								}

								// console.log(that.orderList)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						},
						fail: function fail(res) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						},
					})
				} else {
					this.$mrequest({
						url: 'Mini/order/orderList',
						method: 'POST',
						data: {
							order_status: that.navIndex
						},
						callBack: function callBack(res) {
							if (res.status) {
								that.orderList = res.data
								if (JSON.stringify(that.orderList) != '[]') {
									that.orderList.forEach(item => {
										let num = 0
										item.order_goods.forEach(v => {
											num += v.buy_num
										})
										item.goodsNum = num
										item.showFlag = false
									})
									that.showflag = false
								} else {
									that.showflag = true
								}

								console.log(that.orderList)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						},
						fail: function fail(res) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						},
					})
				}

			},
			// 返回按钮
			back() {
				uni.navigateBack()
			},
			// 跳转店铺
			goStore(id) {
				uni.navigateTo({
					url: '/other/store/index?id=' + id
				})
			},
			//  切换订单状态
			handleNav(num) {
				if (num == this.navIndex) return
				this.navIndex = num
				this.getOrderList()
			},
			// 立即支付
			payNow(id, num) {
				var that = this
				that.$mrequest({
					url: 'Mini/order/pay',
					method: 'POST',
					data: {
						order_id: id,
						order_no: num
					},
					callBack: function callBack(res1) {
						//  执行微信支付
						if (res1.appId) {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res1.timeStamp,
								nonceStr: res1.nonceStr,
								package: res1.package,
								signType: res1.signType,
								paySign: res1.paySign,
								success: function(res2) {
									//  支付成功了 获取待发货列表
									that.navIndex = 2
									that.getOrderList()
								},
								fail: function(err) {
									// console.log('fail:' + JSON.stringify(err));
									// 支付失败
									uni.showToast({
										title: err,
										icon: 'none'
									})
								}
							});
						}

					},
					fail: function fail(res1) {
						uni.showToast({
							title: res1.msg,
							icon: 'none'
						})
					}
				})
			},
			// 跳转订单详情
			goOrderDetail(id) {
				uni.navigateTo({
					url: '../orderDetail/index?order_id=' + id
				})
			},
			//  改变订单状态
			changeOrderStatus(id, status) {
				var that = this
				that.$mrequest({
					url: 'Mini/order/orderChangeStatus',
					method: "POST",
					data: {
						order_id: id,
						order_status: status
					},
					callBack: function callBack(res) {
						if (res.status) {
							that.navIndex = status
							that.getOrderList()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail(res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					},
				})
			},
			// 删除订单
			orderDel(id) {
				var that = this
				that.$mrequest({
					url: 'Mini/order/delete',
					data: {
						order_id: id
					},
					callBack: function callBack(res) {
						if (res.status) {
							that.getOrderList()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail(res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 再次购买
			buyAgain(item) {
				console.log('再买一次')
				let arr = []
				item.order_goods.map(v => {
					let obj = {}
					obj.buy_num = v.buy_num // 购买数量
					obj.goods_id = v.goods_id // 商品id
					//  如果是多规格商品
					if (v.sku_id) {
						obj.sku_id = v.sku_id
					} else {
						obj.sku_id = 0
					}
					arr.push(obj)
				})
				uni.navigateTo({
					url: '/other/settlement/index?arr=' + JSON.stringify(arr)
				})
			},
			//  修改收货地址
			editAddress(id, id1) {
				var that = this
				this.orderId = id
				this.addressId = id1
				this.addressFlag = true
			},
			//  修改收货地址
			changeAddress(item, index) {
				var that = this
				// if (index == this.addressIndex) return
				// this.addressIndex = index
				that.$mrequest({
					url: 'Mini/order/OrderChangeAddress',
					method: 'POST',
					data: {
						order_id: that.orderId,
						address_id: item.id
					},
					callBack: function callBack(res) {
						if (res.status) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							this.addressFlag = false
							// this.$forceUpdate()
							console.log('打印addressFlag', this.addressFlag)
							that.getOrderList()
						} else {
							this.addressFlag = false
							console.log('打印addressFlag', this.addressFlag)
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail(res) {
						this.addressFlag = false
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			//  获取用户的收货地址
			getAddress() {
				var that = this
				this.$mrequest({
					url: 'Mini/address/getAddress',
					method: 'POST',
					callBack: function callBack(res) {
						if (res.status) {
							that.addressData = res.data
						}
					},
					fail: function fail(res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			//  跳转到新增收货地址
			goAddress() {
				uni.navigateTo({
					url: '/me/address/addAddress'
				})
			},
			//  跳转评论
			goComment(id) {
				console.log('跳转订单品论');
				uni.navigateTo({
					url: '../comments/index?orderId=' + id
				})
			},
			//  查看物流
			goWuliu() {
				console.log('查看物流');
			},
			//  退换货
			goReturn(id) {
				console.log('跳转退换货');
				uni.navigateTo({
					url: `../return/return?orderId=${id}`
				})
			},
			// 更多订单操作
			handleMore(item) {
				console.log('给爷爬！', item)
				item.showFlag = !item.showFlag
				this.$forceUpdate()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
	}

	.barHeight {
		background-color: rgba(52, 195, 158, 1);
	}

	.nodata {
		height: 500rpx;
		width: 100%;
		margin-top: 30rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
	}

	.nav {
		position: relative;
		height: 87rpx;
		width: 100%;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 87rpx;
		color: #FFFFFF;
		background-color: rgba(52, 195, 158, 1);

		&>view {
			position: absolute;
			left: 36rpx;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 25rpx;
			height: 25rpx;
			border-bottom: 5rpx solid #FFFFFF;
			border-left: 5rpx solid #FFFFFF;
			transform: rotate(45deg);

			&>view {
				position: absolute;
				left: -8rpx;
				top: -8rpx;
				width: 40rpx;
				height: 40rpx;
				background: transparent;
			}
		}
	}

	.tabList {
		// display: flex;
		// flex-direction: row;
		// justify-content: flex-start;
		// align-items: center;
		// flex-wrap: nowrap;
		width: 100%;
		height: 106rpx;
		// overflow-x: auto;
		white-space: nowrap;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;

		.table_item {
			display: inline-block;
			position: relative;
			margin: 0 20rpx;
			margin-top: 20rpx;

			&>view {
				position: absolute;
				left: 0;
				bottom: -18rpx;
				width: 100%;
				height: 4rpx;
				background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
			}
		}

		.active {
			color: rgba(52, 195, 158, 1);
		}

	}

	.orderList {
		height: calc(100vh - var(--status-bar-height) - 193rpx);
		background-color: rgba(247, 246, 249, 1);
		padding: 10rpx 30rpx;
		box-sizing: border-box;
	}

	.order {
		position: relative;
		// overflow: hidden;
		width: 100%;
		border-radius: 20rpx;
		padding: 0 24rpx;
		background-color: #fff;
		margin: 17rpx 0;

		.state {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #F55519;
		}

		.store {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			height: 102rpx;

			&>image:nth-child(1) {
				display: block;
				height: 26rpx;
				width: 26rpx;
			}

			&>view {
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #393939;
				margin: 0 15rpx;
			}

			&>image:nth-child(3) {
				display: block;
				width: 21rpx;
				height: 21rpx;
			}
		}

		.goods {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;

			.goodsPic {
				display: block;
				width: 180rpx;
				height: 180rpx;
				border-radius: 15rpx;
			}

			.goodsMsg {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 0 20rpx;

				.goodsName {
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #676767;
				}

				.goodsSpec {
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #A6A6A6;
				}

				.goodsPrice {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-bottom: 10rpx;

					.price {
						font-size: 16rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #F55519;

						&>text {
							font-size: 24rpx;
						}
					}

					.num {
						font-size: 18rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #393939;

					}
				}
			}
		}

		.money {
			text-align: right;
			font-size: 16rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: rgba(245, 85, 25, 1);
			margin: 38rpx 0;

			&>text {
				font-size: 24rpx;
				color: rgba(245, 85, 25, 1);
			}
		}

		.btnList {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			height: 86rpx;
			// margin-bottom: 36rpx;
			padding-bottom: 36rpx;
			box-sizing: border-box;

			&>view {
				height: 100%;
				width: 148rpx;
				border-radius: 25rpx;
				border: 2rpx solid #BBBBBB;
				text-align: center;
				line-height: 50rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				margin-left: 25rpx;
			}

			.btnActive {
				border: none;
				color: #FFFFFF;
				background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
			}

			.more {
				position: relative;
				text-align: left;
				border: none;

				.viewPop {
					position: absolute;
					left: 0;
					bottom: -130rpx;
					z-index: 10;
					background-color: #fff;
					width: 167rpx;
					padding: 0rpx 20rpx;
					text-align: left;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					margin: 24rpx 0;
					// border: 1rpx solid red;
					border-radius: 10rpx;
					box-shadow: 0px 5rpx 12rpx 1rpx rgba(0, 0, 0, 0.3);

					.sanjiao {
						position: absolute;
						left: 10rpx;
						top: -20rpx;
						width: 0;
						height: 0;
						border: 10rpx solid;
						border-color: transparent transparent #fff;
					}
				}
			}
		}
	}

	.addTitle {
		position: relative;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
		text-align: center;
		margin: 20rpx 0;

		.new {
			position: absolute;
			left: 30rpx;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}

	.to_address_item {
		margin-bottom: 50rpx;
		width: 100%;
		height: 66rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.check_box {
			flex-shrink: 0;
			width: 32rpx;
			height: 32rpx;
			position: relative;
			margin-right: 26rpx;

			img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}

		.txt_box {
			font-size: 26rpx;
			font-weight: blod;
		}
	}
</style>
